<template>
  <div id="app">
    <div class="main">
      <!-- 顶部组件 -->
      <hearder-nav
        v-if="$route.meta.headerNav"
        @gotoPerson="gotoPerson"
      ></hearder-nav>
      <!-- 视图路由 -->
      <router-view
        @get-play-all-id="getPlayAllId"
        @get-player-id="getPlayerId"
        @rankSong="getIdMuic"
        @likeSong="getIdMuic"
        @newMuic="getIdMuic"
        @playSong="getPlayerId"
        :collList="collList"
        :views="views"
      ></router-view>
      <!-- <router-view ></router-view> -->
      <player
        @get-player-id="getPlayerId"
        v-show="playerId"
        :player-id="playerId"
        :newMuics="newMuics"
        :list-id="listId"
        @collection="collection"
      ></player>
      <personer :left="left" @exit="gotoPerson" :shows="show"  ></personer>
    </div>
  </div>
</template>

<script>
import hearderNav from "./components/hearderNav.vue";
import player from "./components/player.vue";
import personer from "./components/person.vue";
export default {
  data() {
    return {
      // playerId:true,
      playerId: null,
      show: null,
      newMuics: false,
      listId: null,
      left: null,
      collList:null,
      views:null,
    };
  },
  components: {
    hearderNav,
    player,
    personer,
  },
  methods: {
    getPlayerId(id) {
      this.playerId = id;
    },
    gotoPerson(obj) {
      this.left = obj.left;
      this.show = obj.show;
      // console.log("left", this.left);
      // console.log("show", this.show);
    },
    getIdMuic(obj) {
      this.playerId = obj.id;
      this.newMuics = obj.newMuics;
    },
    getPlayAllId(id) {
      // 这是排行榜类型的id
      this.listId = id;
    },
    
    collection(obj){
      this.collList = obj.loveSongs;
      this.views = obj.views;
      // console.log("收藏",this.collList);
    }
  },
};
</script>

<style lang="less" >
// 这是公共样式
@import "./assets/css/base.css";

// .main {
//   // router-view {
//     // min-width: 320px;
//     // max-width: 750px;
//     // margin: 0 auto;
//   // }
// }
</style>